<template>
  <div class="setting-content">
    <div class="row-button">
      <a-button icon="plus" @click="handleCreate" style="margin-left: 8px" type="primary">
        新增
      </a-button>
      <a-button icon="delete" :disabled="ids.length === 0" style="margin-left: 8px" type="danger">
        删除
      </a-button>
      <a-button icon="redo" @click="getList" style="margin-left: 8px">刷新</a-button>
    </div>
    <a-table
        :row-key="(row) => row.id"
        :row-selection="rowSelection"
        style="margin-left: 10px; margin-right: 10px" :columns="columns" :data-source="nameSpaceList">
        <span slot="action" slot-scope="text, record">
            <a @click="handleUpdate(record)">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm
                title="确定要删除吗?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirmDelete(record)"
                @cancel="cancelDelete"
            >
             <a>删除</a>
          </a-popconfirm>
        </span>
    </a-table>
    <a-modal width="60%" v-model="showCreateModel" :title="title" @ok="handleCreateOk">
      <a-form :layout="formLayout">
        <a-form-item
            label="用户名"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-input v-model="form.name" placeholder="请输入用户名" allowClear/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Setting",
  data() {
    return {
      ids: [],
      form: {
        id: '',
        name: '',
      },
      formLayout: 'horizontal',
      labelCol: {span: 4},
      formItemLayout: {
        labelCol: {span: 4},
        wrapperCol: {span: 14},
      },
      title: '新增',
      showCreateModel: false,
      nameSpaceList: [],
      columns: [
        {
          title: '命名空间名称',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: {customRender: 'name'},
        },
        {
          align: 'center',
          title: '操作',
          key: 'action',
          scopedSlots: {customRender: 'action'},
        },
      ],
      data: [],
    }
  },
  created() {
    this.getList()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          this.ids = selectedRows.map(item => item.id)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {
    confirmDelete(record) {
      axios.delete('http://localhost:20220/nameSpace/delete/' + record.id).then(res => {
        if (200 === res.data.code) {
          this.$message.success('删除成功!')
          this.getList()
          this.showCreateModel = false
        }
      })
    },
    cancelDelete() {
      this.$message.error('已取消删除操作!');
    },
    handleUpdate(row) {
      this.title = '编辑'
      this.form = row
      this.showCreateModel = true
    },
    handleCreateOk() {
      if (this.form.id) {
        this.form.url = `jdbc:mysql://${this.form.host}:${this.form.port}/${this.form.dbName}?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8`
        axios.put('http://localhost:20220/nameSpace/update', this.form).then(res => {
          if (200 === res.data.code) {
            this.$message.success('更新成功!')
            this.getList()
            this.showCreateModel = false
          }
        })
      } else {
        this.form.url = `jdbc:mysql://${this.form.host}:${this.form.port}/${this.form.dbName}?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8`
        axios.post('http://localhost:20220/nameSpace/insert', this.form).then(res => {
          if (200 === res.data.code) {
            this.$message.success('新增成功!')
            this.getList()
            this.showCreateModel = false
          }
        })
      }
    },
    handleCreate() {
      this.form = {
        id: '',
        name: '',
      }
      this.showCreateModel = true
    },
    getList() {
      axios.get('http://localhost:20220/nameSpace/selectList').then(res => {
        if (200 === res.data.code) {
          console.log(res.data)
          this.nameSpaceList = res.data.data
          this.$emit('load')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

.setting-content {
  width: calc(100vw - 240px);

  .row-button {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
  }

}

</style>